<template>
	<view class="loginCon">
		<view class="bgImg">
			<image src="../../static/img/loginBG.png"></image>
		</view>
		<view class="fromContral">
			<view class="fromInput">
				<input v-model="userData.schollNum" placeholder-style="color:#ffffff" class="uni-input username" placeholder="学号" />
			</view>
			<view class="fromInput">
				<input v-model="userData.password" placeholder-style="color:#ffffff" class="uni-input password" type="password" placeholder="密码" />
			</view>
			
				<button type="default" disabled="true" @touchend="login" class="loginBtn">登录</button>
			
			<radio-group @change="radioChange" 
			style="margin-top: 20rpx;color: #ffffff;"
			>
			    <label class="radio"><radio value="教师"/>教师</label>
			    <label class="radio"><radio value="学生"/>学生</label>
				<label class="radio" style="margin-left: 40rpx;" @click="register">注册</label>
			</radio-group>
		</view>
		
		<Message v-if="isMessage" :msgText="msgText"></Message>
		<loading v-if="isLoading"></loading>
	</view>
</template>

<script>
	import loading from "../../commpons/loading.vue"
	import Message from "../../commpons/Message.vue"
	import { login } from "../../network/users.js";
	import { mapMutations } from "vuex";
	export default {
		data() {
			return {
				userData:{
					schollNum:"",
					password:"",
					jiaoses:""
				},
				isMessage:false,
				isLoading:false,
				msgText:""
			}
		},
		methods: {
			...mapMutations([
				"USER_INFO"
			]),
			
			login(){
				this.isLoading = true;
				if(this.userData.schollNum === ""){
					this.tipsMsg("请输入学号");
					return;
				}
				if(this.userData.password === ""){
					this.tipsMsg("请输入密码");
					return;
				}
				if(this.userData.jiaoses === ""){
					this.tipsMsg("请选择角色");
					return;
				}
				login(this.userData).then(res=>{
					if(res.data.code === 1){
						uni.setStorageSync("isLogin",res.data.isLogin)
						uni.setStorageSync("jiaoses",res.data.jiaoses)
						
						this.USER_INFO(res.data.data); //vuex 存储数据
						
						this.userData = {
							schollNum:"",
							password:"",
							jiaoses:""
						}
						
						this.isLoading = false;
						
						uni.switchTab({
							url:"../tabBar/index/index"
						})
					}else{
						this.tipsMsg("账号或密码错误");
					}
				}).catch(err=>{
					this.tipsMsg("服务器繁忙");
				})
			},
			
			radioChange(evt) {
				this.userData.jiaoses = evt.target.value
			},
			
			register(){
				uni.navigateTo({
					url:"../register/register"
				})
			},
			
			tipsMsg(Text){
				this.msgText = Text 
				this.isMessage = true;
				this.isLoading = false;
				setTimeout(()=>{
					this.isMessage = false;
				},2000)
			}
		},
		components:{
			Message,
			loading
		}
	}
</script>

<style>
	.bgImg{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}
	.bgImg image{
		width: 100%;
		height: 100%;
	}
	.fromContral{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}
	.fromInput{
		width:560rpx;
		padding: 20rpx;
		border-radius: 50rpx;
		border: 1px solid #FFFFFF;
		margin-top: 40rpx;
	}
	.fromInput:nth-child(1){
		background: #29b7a9;
	}
	.fromInput:nth-child(2){
		background: #29b7a9;
	}
	.uni-input{
		
	}
	.loginBtn{
		width:600rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		margin-top: 40rpx;
		background: #ffffff;
	}
</style>
